<template>
  <div id="right1" class="right1"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("right1"));
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "Referer of a Website",
        //   subtext: "Fake Data",
        //   left: "center",
        // },

        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          x: "center",
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            radius: [0, "55%"],
            center: ["50%", "55%"],
            data: [
              { value: 7.69, name: "偏低" },
              { value: 84.62, name: "准确" },
              { value: 7.69, name: "偏高" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  // formatter: "{b} : {c} ({d}%)",
                  formatter: "{b}({d}%)",
                },
                labelLine: { show: true },
              },
            },
          },
        ],
      });
    },
  },
  // 以下是生命周期钩子
  mounted() {
    this.draw();
  },
};
</script>
<style lang='less' scoped>
.right1 {
  width: 100%;
  height: 100%;
}
</style>
